:host {
  @apply flex flex-col flex-1 max-w-full px-1 md:px-4;
}

.pac-home__navigation {
  .mat-tab-link {
    height: 38px;
    min-width: 100px;
  }
}

.pac-home__content {
  @apply m-0 flex-1 overflow-y-auto overflow-x-hidden;
}

.pac-home__quick-guide {
  background-color: var(--ngm-home-card-background-color);

  .step {
    width: 220px;
    @apply flex justify-center items-center px-4;

    .complete {
      font-size: 2rem;
    }
    .guide {
      font-size: 1rem;
    }
  }
  .step:first-child {
    .complete {
      font-size: 3rem;
    }
  }
}

.pac-story-widget-feed {
  height: 100%;
}

.pac-home__assets-empty {
  height: 280px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .shopping-cart {
    font-size: 3rem;
  }
}

.pac-home__assets {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 500px;

  .assets-list {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.searching-icon {
  font-size: 1.75em;
}

.complete.emoji-loader {
  line-height: 3rem;
}

.pac-home__widget {
  background-color: var(--ngm-home-card-background-color);
}

.emoji-loader::before {
  font-size: 3rem;
}

gridster {
  background: transparent;

  gridster-item {
    overflow: visible;
  }
}

:host::ng-deep {
  gridster {
    .gridster-row {
      border-color: var(--ngm-color-outline);
    }
  
    .gridster-column {
      border-color: var(--ngm-color-outline);
    }
  }
}